<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-for="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml" lang="en">

<head>
    <meta charset="utf-8"/>
    <title>Java-TC</title>
</head>

<body class="pg">
<div class="page" id="app">
    <div id="mallPage" class=" mallist tmall- page-not-market ">

        <!-- 头部搜索 -->
        <div id="header" class=" header-list-app">
            <div class="headerLayout">
                <div class="headerCon ">
                    <!-- Logo-->
                    <h1 id="mallLogo">
                        <img th:src="@{/images/jdlogo.png}" alt="">
                    </h1>

                    <div class="header-extra">

                        <!--搜索-->
                        <div id="mallSearch" class="mall-search">
                            <form name="searchTop" class="mallSearch-form clearfix">
                                <fieldset>
                                    <legend>搜索</legend>
                                    <div class="mallSearch-input clearfix">
                                        <div class="s-combobox" id="s-combobox-685">
                                            <div class="s-combobox-input-wrap">
                                                <input type="text" v-model="keyword" autocomplete="off" value="dd" id="mq"
                                                       class="s-combobox-input" aria-haspopup="true">
                                            </div>
                                        </div>
                                        <button type="submit" @click.prevent="searchkey" id="searchbtn">搜索</button>
                                    </div>
                                </fieldset>
                            </form>
                            <ul class="relKeyTop">

                                <li><a>TC</a></li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品详情页面 -->
        <div id="content">
            <div class="main">

                <!-- 商品详情 -->
                <div class="view grid-nosku">
                    <table  width="1040" border="0" cellspacing="0" cellpadding="0">
                            <tr v-for = "item in results">
                                <td style="width: 25px;">{{item.id}}</td>
                                <td style="width: 15px;">{{item.one}}</td>
                                <td style="width: 15px;">{{item.two}}</td>
                                <td style="width: 15px;">{{item.three}}</td>
                                <td style="width: 15px;">{{item.four}}</td>
                                <td style="width: 15px;">{{item.five}}</td>
                                <td style="width: 15px;">{{item.six}}</td>
                                <td style="width: 15px;">{{item.seven}}</td>
                            </tr>
                    </table>
                </div>
                <div>
                    <el-pagination
                            background
                            @current-change="currentChange"
                            layout="prev, pager, next"
                            :total="1000">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="app2">
   <!-- <button type="submit" v-on:click="handleClick" >搜索</button>-->

</div>
  <!--前端使用vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script th:src="@{/js/axios.min.js}"></script>
<!--<script th:src="@{/js/vue.min.js}"></script>-->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    let vue = new Vue({
        el:"#app",
        data:{
            keyword:"",
            results:[]
        },
        methods:{
            searchkey(){
                var keyword = this.keyword;
                console.log(keyword);
                // 对接 接口
                axios.get("/tc/queryGoods?keyword="+ keyword + "&pageNo=1&pageSize=50").then(response => {
                    console.log(response.data);
                    this.results = response.data.data;
                })
            },
            currentChange(pageNo) {
                var keyword = this.keyword;
                console.log(keyword);

                axios.get("/tc/queryGoods?keyword="+ keyword + `&pageNo=${pageNo}&pageSize=50`).then(response => {
                    console.log(response.data);
                    this.results = response.data.data;
                })
            },

        }
    });

</script>

</body>
</html>